<template>
  <div style="width: 100%; height: 100%; display: flex">
    <FlowGraph ref="flowGraphRef" :data="data"></FlowGraph>
    <div style="width: 320px; padding-right: 20px">
      <FlowPane></FlowPane>
    </div>
  </div>
</template>

<script setup lang="ts" name="Flow">
import FlowGraph from "./FlowGraph.vue";
import { provide, ref } from "vue";
import FlowPane from "./FlowPane/index.vue";
import { KEY_PROCESS_CONFIG } from "@/components/Micro/Flow/flow";
defineProps({
  data: {
    // 传入的流程节点数据
    type: Object,
    default: () => {}
  }
});
const flowGraphRef = ref();
const validate = () => {
  return flowGraphRef.value.validate();
};
/**
 * 获取流程配置结果
 */
const getResult = () => {
  return flowGraphRef.value.getResult();
};
const processConfig = ref({
  selectedNode: null
});

provide(KEY_PROCESS_CONFIG, processConfig);
defineExpose({
  validate,
  getResult
});
</script>
<style lang="scss" scoped></style>
